<script setup>
import { reactive } from 'vue';
import { login } from '../../api'
import { useRouter } from 'vue-router';

const router = useRouter()

let form = reactive({
  username: '',
  password: ''
});

const onSubmit = async () => {
    try {
        if(form.username === '' || form.password === '') {
            return
        }
        let res = await login(form)
        if(res.code === 200) {
            localStorage.setItem('token', res.data.token)
            router.push('/admin/users/personal')
        }
    } 
    catch (error) {
        console.log(error)
    }
}
</script>

<template>
  <div class="mainWrapper">
    <el-form class="loginForm" :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="用户名">
        <el-input v-model.trim="form.username" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model.trim="form.password" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.mainWrapper {
  width: 100vw;
  height: 100vh;
  background: url("../../assets/images/loginBg.png") no-repeat;
  background-size: 100% 100%;
}

.loginForm {
    position: absolute;
    top: 50%;
    right: 20vmin;
    transform: translateY(-50%);
    background: #FFF;
    padding: 20px;
    border-radius: 8px;
}
</style>
